<template>
  <div class="content-box">
    <nav-title title="人员调动审批" :routerLink="routerLink"/>
    <!-- 发起人基本信息 -->
    <div class="regulations-box">
      <div class="title">发起人基本信息</div>
      <div class="information">
        <p class="info-cell clearfix">
          <label class="label">发起人姓名</label>
          <span class="value">{{cWfName}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">发起人部门</label>
          <span class="value">{{cWfDeptdescr}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">发起人岗位</label>
          <span class="value">{{cWfJcDescr}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">联系电话</label>
          <span class="value">{{cWfPhone}}</span>
        </p>
      </div>
    </div>

    <!-- 基本信息 -->
    <div class="regulations-box">
      <div class="title">基本信息</div>
      <div class="information">
        <p class="info-cell clearfix">
          <label class="label">员工ID</label>
          <span class="value">{{emplid}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">姓名</label>
          <span class="value">{{nameDisplay}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">入职日期</label>
          <span class="value">{{lastHireDt|dateFormat}}</span>
        </p>
      </div>
    </div>

    <!-- 调动前信息 -->
    <div class="regulations-box">
      <div class="title">调动前信息</div>
      <div class="information">
        <p class="info-cell clearfix">
          <label class="label">业务系统</label>
          <span class="value">{{cBusnDescr}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">部门</label>
          <span class="value">{{rsFullName}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">岗位</label>
          <span class="value">{{jobcodeDescr}}</span>
        </p>
        <p class="info-cell clearfix">
          <label class="label">职等</label>
          <span class="value">{{rsJobLevel}}</span>
        </p>
      </div>
    </div>

    <!-- 调动后信息 -->
    <div class="regulations-box">
      <div class="title">调动后信息</div>
      <div class="information">

        <div class="info-cell">
          <label class="label">调动生效日期</label>
          <span class="value">{{cXfrDt|dateFormat}}</span>
        </div>

        <div class="info-cell">
          <label class="label">调动类型</label>
          <span class="value">{{actionReasonValue}}</span>
        </div>

        <div class="info-cell">
          <div class="label">调动后业务系统</div>
            <span class="value">{{cXfrBusUnitValue}}</span>
        </div>

        <div class="info-cell">
          <div class="label">调动后部门</div>
          <span class="value">{{cXfrDeptdescr}}</span>
        </div>

        <div class="info-cell">
          <div class="label">调动后岗位</div>
          <span class="value">{{cXfrJobcodeDesc}}</span>
        </div>

        <div class="info-cell">
          <div class="label">调动后职等</div>
          <span class="value">{{cXfrJoblevel}}</span>
        </div>

        <div class="info-cell">
          <div class="label">调动后薪资组</div>
          <span class="value">{{gpPaygroupValue}}</span>
        </div>

        <div class="info-cell">
          <div class="label">调动后考勤组</div>
          <span class="value">{{cTlGrpValue}}</span>
        </div>

        <div class="info-cell">
          <div class="label">调动后发薪单位</div>
          <span class="value">{{companyValue}}</span>
        </div>

        <div class="info-cell">
          <div class="label">调动后社保缴纳单位</div>
          <span class="value">{{cHireSiUnitValue}}</span>
        </div>

        <div class="info-cell">
          <div class="label">调动后成本中心</div>
          <span class="value">{{rsCostCenterValue}}</span>
        </div>

        <div class="info-cell">
          <div class="label">备注</div>
          <span class="value">{{cOtherExplain}}</span>
        </div>

      </div>
    </div>

    <!-- 流程图 -->
    <div class="regulations-box">
      <div class="title">流程图</div>
      <v-flow-charts :transNum="cTransactionNbr"></v-flow-charts>
    </div>

    <!-- 审批意见 -->
    <div class="regulations-box">
      <div class="info-label">审批意见</div>
      <div class="info-label-text">
        <textarea v-if="approved == '0'" placeholder="请在这里输入..." rows="5" v-model="cComments"></textarea>
        <textarea v-else="" readonly rows="5" v-model="cComments"></textarea>
      </div>
    </div>

    <div style="height: 50px"></div>
    <!-- 底部按钮 -->
    <div v-if="approved == '0'">
      <operation-btn @doOperate="doOperate" :cApprovalSw="cApprovalSw" :cDenySw="cDenySw" :cPushbackAllSw="cPushbackAllSw" :cAddSw="cAddSw"></operation-btn>
    </div>
  </div>
</template>
<script>
import { Selector, Datetime, Group, PopupPicker, PopupRadio } from 'vux'
import {
  getMobilization,
  getCompensateProcess,
  getCompensateApprove
} from '../../api/api'
import { json2Form } from '../../util/http'
import { dateFormat } from 'vux'
import operationBtn from './common/operationBtn'
import vFlowCharts from '../formalStaff/common/flowChart'

export default {
  name: 'guide-to',
  components: {
    Group,
    Selector,
    Datetime,
    PopupPicker,
    PopupRadio,
    operationBtn,
    vFlowCharts
  },
  created(){
    this.cTransactionNbr = this.$route.query.cTransactionNbr;
    this.approved = this.$route.query.approved;
    if (this.$route.query.approved == '0') {
      this.routerLink = 'TodoList'
    } else if (this.$route.query.approved == '1') {
      this.routerLink = 'DoneList'
    } else {
      this.routerLink = 'MyApplication'
    }
    //工作调动审批审批信息
    this.getMobilizationInfo();
  },
  mounted() {

  },
  data() {
    return {
      //返回需要跳转到哪个页面
      routerLink: '',
      //是否从已审批页面跳转过来
      approved: '0',

      //发起人基本信息
      cWfName: '', //发起人姓名
      cWfDeptdescr: '', //发起人部门
      cWfJcDescr: '', //发起人岗位
      cWfPhone: '', //发起人联系方式

      //基本信息
      emplid: '', //员工id
      nameDisplay: '', //姓名
      lastHireDt: '', //入职日期

      //调动前信息
      businessUnit: '', //业务系统
      cBusnDescr: '',
      rsFullName: '', //部门
      jobcodeDescr: '', //岗位
      rsJobLevel: '', //职等

      //调动后信息
      cXfrDt: '', // 调动生效日期
      actionReasonValue: '', // 调动类型
      cXfrBusUnitValue: '', // 调动后业务系统
      cXfrDeptdescr: '', //调动后部门
      cXfrJobcodeDesc: '', //调动后岗位
      cXfrJoblevel: '', //调动后职等
      gpPaygroup: '', //调动后薪资组
      gpPaygroupValue: '',
      cTlGrpValue: '',//调动后考勤组
      company: '', //调动后发薪单位
      companyValue: '',
      cHireSiUnit: '', //调动后社保缴纳单位
      cHireSiUnitValue: '',
      rsCostCenter: '', //调动后成本中心
      rsCostCenterValue: '',
      cOtherExplain: '', //审批备注

      //按钮点击的参数
      cWfType: '',
      cTransactionNbr: '',
      cUserId: '',
      cComments: '',

      cApprovalSw: '',
      cDenySw: '',
      cPushbackAllSw: '',
      cAddSw: ''
    }
  },
  methods: {
    getMobilizationInfo() {
      let params = {
        cTransactionNbr: this.cTransactionNbr
      }
      getMobilization(params)
        .then(res => {
          if (res && res.retCode === '000000') {
            //发起人信息
            this.cWfName = res.retData.cWfName
            this.cWfDeptdescr = res.retData.cWfDeptdescr
            this.cWfJcDescr = res.retData.cWfJcDescr
            this.cWfPhone = res.retData.cWfPhone
            //基本信息
            this.emplid = res.retData.emplid
            this.nameDisplay = res.retData.nameDisplay
            this.lastHireDt = res.retData.lastHireDt
            //调动前信息
            this.businessUnit = res.retData.businessUnit
            this.cBusnDescr = res.retData.cBusnDescr;
            this.rsFullName = res.retData.rsFullName
            this.jobcodeDescr = res.retData.jobcodeDescr
            this.rsJobLevel = res.retData.rsJobLevel

            //调动后信息
            this.cXfrDt = res.retData.cXfrDt
            this.actionReasonValue = res.retData.actionReasonValue
            this.cXfrBusUnitValue = res.retData.cXfrBusUnitValue
            this.cXfrDeptdescr = res.retData.cXfrDeptdescr
            this.cXfrJobcodeDesc = res.retData.cXfrJobcodeDesc
            this.cXfrJoblevel = res.retData.cXfrJoblevel
            this.gpPaygroup = res.retData.gpPaygroup
            this.gpPaygroupValue = res.retData.gpPaygroupValue
            this.cTlGrpValue = res.retData.cTlGrpValue
            this.company = res.retData.company
            this.companyValue = res.retData.companyValue
            this.cHireSiUnit = res.retData.cHireSiUnit
            this.cHireSiUnitValue = res.retData.cHireSiUnitValue
            this.rsCostCenter = res.retData.rsCostCenter
            this.rsCostCenterValue = res.retData.rsCostCenterValue
            this.cOtherExplain = res.retData.cOtherExplain

            this.cApprovalSw = res.retData.cApprovalSw
            this.cDenySw = res.retData.cDenySw
            this.cPushbackAllSw = res.retData.cPushbackAllSw
            this.cAddSw = res.retData.cAddSw

            //审批信息
            this.cWfType = res.retData.cWfType
            this.cTransactionNbr = res.retData.cTransactionNbr
          } else {
            this.$vux.alert.show({
              title: '',
              content: res.retMsg
            })
          }
        })
        .catch(res => {
          this.$vux.alert.show({
            title: '警告',
            content: '网络异常，请稍后重试'
          })
        })
    },
    doOperate(actionType) {
      //addUserids:{"123","123"}(加签员工ID,从加签页面的已选员工获取)
      //同意审批
      let params = {
        c_WF_TYPE: this.cWfType,
        c_TRANSACTION_NBR: this.cTransactionNbr, //流程编号
        c_ACTION_TYPE: actionType,
        c_COMMENTS: this.cComments
      }

      if (actionType == 'AddStep') {
        //加签需要跳转至加签页面，并携带参数
        this.$router.push({
          name: 'Visa',
          params: {
            c_TRANSACTION_NBR: this.cTransactionNbr,
            c_WF_TYPE: this.cWfType,
            c_COMMENTS: this.cComments,
            c_Link: 'Mobilization'
          }
        })
      } else {
        getCompensateApprove(json2Form(params))
          .then(res => {
            if (res && res.retCode === '000000') {
              let _this = this
              this.$vux.alert.show({
                title: '成功',
                content: '操作成功',
                onHide() {
                  _this.$router.push('/TodoList')
                }
              })
            } else {
              this.$vux.alert.show({
                title: '',
                content: res.retMsg
              })
            }
          })
          .catch(res => {
            this.$vux.alert.show({
              title: '警告',
              content: '网络异常，请稍后重试'
            })
          })
      }
    }
  }
}
</script>

<style type="text/scss" lang="scss">
@import '../../styles/staff.scss';
</style>
